<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>审核链维护</span>
      </div>
      <div class="div">
        <span></span>
<!--        <span class="solid" @click="add">新增</span>-->
      </div>
    </header>
    <el-table
      ref="tables"
      v-loading="loadingShow"
      element-loading-text="数据正在加载中..."
      :data="tableData"
      border
      @cell-click="handle"
      @select="handleRow"
      @selection-change="handleSelectionChange"
      :height="tabHeight"
      :header-cell-style="{background:'#1da4f2',color:'#fff',textAlign:'center'}"
      style="width: 100%;font-size: 15px"
      :header-cell-class-name="cellClass"
      :row-class-name="tableRowClassName"
    >

      <!--      <template slot="empty">-->
<!--        <div style="margin-top: 15%">-->
<!--          <img src="../../../../assets/暂无数据.png" alt="暂无数据">-->
<!--          <br>-->
<!--          <span>暂无数据</span>-->
<!--        </div>-->
<!--      </template>-->
      <el-table-column
        fixed
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
          fixed
          label="序号"
          type="index"
          align="center"
          width="60">
      </el-table-column>
      <el-table-column
        prop="group_name"
        label="归属"
        width="100"
      >
        <template slot-scope="scope">
          <span style="display: flex;justify-content: space-between;align-items: center">
            {{scope.row.group_name ? scope.row.group_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc1.doc_name"
        label="第一级"
        width="100">
        <template slot-scope="scope">
          <span style="display: flex;justify-content: space-between;align-items: center">
           {{scope.row.doc1.doc_name ? scope.row.doc1.doc_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <!-- 一级审核时间 -->
      <el-table-column
        prop="assesschain_time"
        label="审核时间"
        width="135"
        class-name="inpTime"
      >
        <template slot-scope="scope">
          <div >
            <el-input size="small"
              type='number'
              :readonly="!scope.row.doc1.doc_name||scope.row.del_tag==1"
              v-model="scope.row.doc1.assesschain_time"
              @change="handleInp(scope.row.doc1.assesschain_time, scope.row)"
              placeholder="输入时间"
            > <template slot="append">小时</template></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc2.doc_name"
        label="第二级"
        width="100">
        <template slot-scope="scope">
           <span style="display: flex;justify-content: space-between;align-items: center">
          {{scope.row.doc2.doc_name ? scope.row.doc2.doc_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <!-- 二级审核时间 -->
      <el-table-column
        prop="assesschain_time"
        label="审核时间"
        width="135"
        class-name="inpTime"
      >
        <template slot-scope="scope">
          <div >
            <el-input size="small"
              type='number'
              :readonly="!scope.row.doc2.doc_name||scope.row.del_tag==1"
              v-model="scope.row.doc2.assesschain_time"
              @change="handleInp(scope.row.doc2.assesschain_time, scope.row)"
              placeholder="输入时间"
            > <template slot="append">小时</template></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc3.doc_name"
        label="第三级"
        width="100">
        <template slot-scope="scope">
           <span style="display: flex;justify-content: space-between;align-items: center">
         {{scope.row.doc3.doc_name ? scope.row.doc3.doc_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <!-- 三级审核时间 -->
      <el-table-column
        prop="assesschain_time"
        label="审核时间"
        width="135"
        class-name="inpTime"
      >
        <template slot-scope="scope">
          <div >
            <el-input size="small"
              type='number'
              :readonly="!scope.row.doc3.doc_name||scope.row.del_tag==1"
              v-model="scope.row.doc3.assesschain_time"
              @change="handleInp(scope.row.doc3.assesschain_time, scope.row)"
              placeholder="输入时间"
            > <template slot="append">小时</template></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc4.doc_name"
        label="第四级"
        width="100">
        <template slot-scope="scope">
           <span style="display: flex;justify-content: space-between;align-items: center">
            {{scope.row.doc4.doc_name ? scope.row.doc4.doc_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <!-- 四级审核时间 -->
      <el-table-column
        prop="assesschain_time"
        label="审核时间"
        width="135"
        class-name="inpTime"
      >
        <template slot-scope="scope">
          <div >
            <el-input size="small"
              type='number'
              :readonly="!scope.row.doc4.doc_name||scope.row.del_tag==1"
              v-model="scope.row.doc4.assesschain_time"
              @change="handleInp(scope.row.doc4.assesschain_time, scope.row)"
              placeholder="输入时间"
            > <template slot="append">小时</template></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc5.doc_name"
        label="第五级"
        width="100">
        <template slot-scope="scope">
          <span style="display: flex;justify-content: space-between;align-items: center">
            {{scope.row.doc5.doc_name ? scope.row.doc5.doc_name : '请选择'}}
            <img src="../../../../assets/下弹灰@2x.png" style="width: 13px;height: 7px;" alt="">
          </span>
        </template>
      </el-table-column>
      <!-- 五级审核时间 -->
      <el-table-column
        prop="assesschain_time"
        label="审核时间"
        width="135"
        class-name="inpTime"
      >
        <template slot-scope="scope">
          <div >
            <el-input size="small"
              type='number'
              :readonly="!scope.row.doc5.doc_name||scope.row.del_tag==1"
              v-model="scope.row.doc5.assesschain_time"
              @change="handleInp(scope.row.doc5.assesschain_time, scope.row)"
              placeholder="输入时间"
            > <template slot="append">小时</template></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="keepBottom" >
      <button @click.stop="add">新增</button>
      <button @click="zuofei">{{selectList[0] && selectList[0].del_tag == 1 ? '启用' : '禁用'}}</button>
      <button @click.stop="look" :class="selectList[0] && selectList[0].del_tag == 1 ? 'disable' : ''">预览</button>
    </div>
    <van-popup v-model="show"
               round position="bottom" :style="{ height: '80%', bottom: isShowtabbar ? '0px' : '50px' }" >
      <div class="popHeader">
        <div class="div" @click="show = false" style="color: #999999">取消</div>
        <div class="div">选择分配组</div>
        <div class="div solid" @click="fenPeiConfirm()">确认</div>
      </div>
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in groupArr"
          :key="index"
          :title="item.group_name"
          name="1"
        >
          <template #value>
            <div
              style="width: 16px;height: 16px;float: right;margin-right: 5px"
              @click.stop="selectID = item.id, select_group_name = item.group_name">
              <img v-if="selectID == item.id"
                   class="selectImg" src="../../../../assets/题目选择.png" alt="">
              <img v-else
                   class="selectImg"
                   src="../../../../assets/题目未选择.png" alt="">
            </div>
          </template>
          <van-collapse v-model="activeNames">
            <van-collapse-item
              v-for="(curr, currIndex) in item.groups"
              :key="currIndex"
              :title="curr.group_name"
              name="1"
            >
              <template #value>
                <div
                  style="width: 16px;height: 16px;float: right;margin-right: 5px"
                  @click.stop="selectID = curr.id, select_group_name = curr.group_name">
                  <img  v-if="selectID == curr.id"
                        class="selectImg" src="../../../../assets/题目选择.png" alt="">
                  <img v-else
                       class="selectImg"
                       src="../../../../assets/题目未选择.png" alt="">
                </div>
              </template>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
      </van-collapse>
    </van-popup>

    <!--     选医生-->
    <van-popup
      v-model="doctorShow"
      round
      :close-on-click-overlay="false"
      position="bottom"
      :style="{ height: '80%', bottom: isShowtabbar ?  '0px' : '50px' }">
      <div class="popDiv" ref="box">
        <div class="popHeader" style="padding: 0 10px;box-sizing:border-box;border-bottom: 1px solid #E5E5E5">
            <span @click="doctorShow=false" style="width: 30%;">
              取消
            </span>
          <span style="width: 40%;display: flex;
              justify-content: center;">
              请选择医生
              </span>
          <span @click="docConfirm" style="width: 30%;color:#1DA4F2;display: flex;justify-content: flex-end">
              确定
            </span>
        </div>
        <div class="box"
             @click="select_doc_ID = item.USER_ID, select_doc_name = item.NICK_NAME"
             :class="select_doc_ID == item.USER_ID ? 'selectDoctor' : ''"
             v-for="(item, index) in doctorsList" :key="index">
          <div class="box_left">
            <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
            <img v-else src="../../../../assets/男医生@2x.png" class="PHOTO" alt="">
          </div>
          <div class="box_right">
            <ul>
              <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
              <span>|</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
              <span>|</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
            </span>
              </li>
              <li>
                <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
                <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>
              </li>
            </ul>
            <div class="box_rigth_bottom">
              <p>
                <a >接诊率:</a><span>{{item.jiezhenCount}}</span>
                <a >好评率:</a><span>{{item.haopingLv}}</span>
                <a >咨询量:</a><span>{{item.zixunCount}}</span>
              </p>
              <p class="goodAt">
                <a style="display: block">擅长:</a>
                <span>{{item.Goodat}}</span>
              </p>
              <p>
                <a >最快回复:</a>
                <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
                <span v-else style="color: #999999">暂无</span>
                <a >平均回复:</a>
                <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
                <span style="color: #999999" v-else>暂无</span>
              </p>
            </div>
          </div>
        </div>
        <!--        <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 80%;-->
        <!--    display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>-->
        <!--          加载中...-->
        <!--        </van-loading>-->
                <van-empty
                  style="width: 100%;height: 60%"
                  v-show="doctorsList.length <= 0"
                  class="custom-image"
                  :image="require('../../../../assets/空两本书.png')"
                  description="暂无符合条件医生"
                />
      </div>
    </van-popup>

    <van-dialog v-model="cancelShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`确认` + (selectList.length > 0 && selectList[0].del_tag == 1 ? '启用' : '禁用') +`吗？`"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'JudgeTable',
  data () {
    return {
      tableData: [],
      team_id: this.$route.query.team_id,
      show: false,
      groupArr: [],
      activeNames: ['1'],
      selectID: '',
      select_group_name: '',
      ITEM: [],
      row: [],
      doctorShow: false,
      select_doc_ID: '',
      select_doc_name: '',
      doctorsList: [],
      selectList: [],
      cancelShow: false,
      loadingShow: true,
      visible: true,
      isShowtabbar: sessionStorage.getItem('isShowtabbar')
    }
  },
  computed: {
  //  height="calc(100vh - 44px - 50px - 60px)"
    tabHeight () {
      let title = ''
      if (this.isShowtabbar) {
        title = 'calc(100vh - 44px - 60px)'
      } else {
        title = 'calc(100vh - 44px - 60px - 44px)'
      }
      return title
    },
  },
  mounted () {
    this.$toast({
      message: '向左滑动查看更多',
      icon: 'like-o'
    })
    // 选择已有列表
    this.getTeamGroup()
    // 选择分配组
    this.getTeamErji()
  },
  methods: {
    // 判断是否是作废
    tableRowClassName ({row, rowIndex}) {
      if (row.del_tag == 0) { // 禁用
        return 'success-row'
      } else if (row.del_tag == 1) { // 启用
        return 'warning-row'
      }
      return ''
    },
    // 给全选加class
    cellClass (row) {
      if (row.columnIndex == 0) {
        return 'disabledCheck'
      }
    },
    handleRow (selection, row) {
      // 先清除所有选中的
      this.$refs.tables.clearSelection()
      // 当前的点击实现勾选
      this.$refs.tables.toggleRowSelection(row)
    },
    look () {
      if (this.selectList[0].del_tag == 1) {
        return false
      }
      if (this.selectList.length <= 0) {
        this.$toast('请先选择一条审核链')
        return false
      } else if (!this.selectList[0].doc1.doc_user_id) {
        this.$toast('请先维护审核链数据')
        return false
      } else {
        let data = this.selectList[0]
        this.$router.push({path: '/JudgeAdd', query: {userid: this.userid, team_id: this.team_id, id: data.id, isEdit: 0}})
      }
    },
    zuofei () {
      if (this.selectList.length <= 0) {
        this.$toast('请先选择一条审核链')
        return false
      }
      if (this.selectList[0].id && this.selectList.length > 0) {
        this.cancelShow = true
      } else {
        // this.tableData.splice(-1, 1)
      }
    },
    // 删除确认
    deleteConfirm () {
      let id = []
      this.selectList.map((curr, index) => {
        if (index < this.selectList.length - 1) {
          id += curr.id + ','
        } else {
          id += curr.id
        }
      })
      let del_tag = ''
      if (this.selectList[0].del_tag == 0) { // 启用 正常
        del_tag = '1'
      } else if (this.selectList[0].del_tag == 1) { // 禁用 作废
        del_tag = '0'
      }
      this.$http.updateTeamassesschainDel({id: id, del_tag: del_tag})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // 选择已有列表
            this.getTeamGroup()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    handleSelectionChange (val) {
      this.selectList = val
    },
    // 监听时间变更
    handleInp (val, scop) {
      this.$nextTick(() => {
        // console.log(scop, val, this.row.doc1.assesschain_time)
        if (!val) {
          this.$toast('请输入审核时间')
          return false
        } else {
          this.keep()
        }
      })
    },
    // 保存
    keep (text) {
      let id = '0'
      if (this.row.id) {
        id = this.row.id
      }
      let Alist = []
      if (text == 'team') {
      } else {
        for (var i = 0; i < 5; i++) {
          let query = 'doc' + (Number(i) + 1)
          if (this.row[query].doc_user_id) {
            let obj = {
              doc_user_id: this.row[query].doc_user_id,
              assesschain_index: i.toString(),
              assesschain_time: this.row[query].assesschain_time
            }
            Alist.push(obj)
          }
        }
      }
      this.$http.saveTeamAssesschain({id: id, team_id: this.team_id, group_id: this.row.group_id, Alist: Alist})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // 选择已有列表
            this.getTeamGroup()
          } else {
            this.$toast(res.data.msg)
            // 选择已有列表
            this.getTeamGroup()
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 选择医生的确认按钮
    docConfirm () {
      this.ITEM.doc_user_id = this.select_doc_ID
      this.ITEM.doc_name = this.select_doc_name
      this.doctorShow = false
      this.select_doc_ID = ''
      this.select_doc_name = ''
      this.keep()
    },
    // 获取团队医生
    getTeamDoctor () {
      // , group_id: this.row.group_id
      this.$http.findDoctor({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorsList = res.data.data
            // this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击单元格
    handle (row, column, event, cell) {
      console.log(row)
      console.log(column)
      console.log(event)
      console.log(cell)
      this.row = row
      if (column.property) {
        if (this.row.del_tag == 1) {
          // this.$toast('')
          return false
        }
        if (column.property == 'group_name') {
          this.ITEM = row
          if (row.group_name) {
            this.selectID = row.group_id
            this.select_group_name = row.group_name
          }
          this.show = true
        } else if (column.property !== 'assesschain_time') {
          // 查看是否选了归属
          if (this.row.group_id) {
            // 选择团队医生
            this.getTeamDoctor()
            let query = column.property.split('.')[0]
            let index = Number(query.charAt(query.length - 1))
            let last = 'doc' + (Number(index) - 1)
            if (index <= 1) {
              this.ITEM = row[query]
              this.select_doc_ID = row[query].doc_user_id
              this.select_doc_name = row[query].doc_name
              this.doctorShow = true
            } else if (row[last].doc_user_id) {
              this.ITEM = row[query]
              this.select_doc_ID = row[query].doc_user_id
              this.select_doc_name = row[query].doc_name
              this.doctorShow = true
            } else { // 上一级还未选医生
              this.$toast('请先选择上一级医生')
              return false
            }
          } else {
            this.$toast('请先选择归属')
            return false
          }
        }
      }
    },
    // 选择组 确认按钮
    fenPeiConfirm () {
      this.ITEM.group_id = this.selectID
      this.ITEM.group_name = this.select_group_name
      this.show = false
      this.selectID = ''
      this.select_group_name = ''
      this.keep('team')
    },
    // 获取二级列表
    getTeamErji () {
      this.$http.treeGroup({data_user_id: this.data_user_id, team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.groupArr = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 新增
    add () {
      let obj = {
        group_id: '',
        group_name: '',
        doc1: {
          doc_user_id: '',
          doc_name: '',
          assesschain_time: null
        },
        doc2: {
          doc_user_id: '',
          doc_name: '',
          assesschain_time: null
        },
        doc3: {
          doc_user_id: '',
          doc_name: '',
          assesschain_time: null
        },
        doc4: {
          doc_user_id: '',
          doc_name: '',
          assesschain_time: null
        },
        doc5: {
          doc_user_id: '',
          doc_name: '',
          assesschain_time: null
        },
        del_tag: 0
      }
      if (this.tableData.length <= 0 || this.tableData[this.tableData.length - 1].group_id) {
        this.tableData.push(obj)
      } else {
        this.$toast('请先完善当前数据')
        return false
      }
    },
    // 获取当前列表
    getTeamGroup () {
      this.loadingShow = true
      this.$http.findTeamAssesschain({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tableData = []
            res.data.data.map((curr, index) => {
              let obj = {
                id: curr.id,
                group_id: curr.group_id,
                group_name: curr.group_name,
                doc1: {
                  doc_user_id: '',
                  doc_name: '',
                  assesschain_time: null
                },
                doc2: {
                  doc_user_id: '',
                  doc_name: '',
                  assesschain_time: null
                },
                doc3: {
                  doc_user_id: '',
                  doc_name: '',
                  assesschain_time: null
                },
                doc4: {
                  doc_user_id: '',
                  doc_name: '',
                  assesschain_time: null
                },
                doc5: {
                  doc_user_id: '',
                  doc_name: '',
                  assesschain_time: null
                },
                del_tag: curr.del_tag
              }
              curr.Alist.forEach((item, i) => {
                obj['doc' + (i + 1)].doc_name = item.staff_name
                obj['doc' + (i + 1)].doc_user_id = item.USER_ID
                obj['doc' + (i + 1)].assesschain_time = item.assesschain_time
              })
              this.tableData.push(obj)
            })
            this.loadingShow = false
          } else {
            this.$toast(res.data.msg)
            this.loadingShow = false
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.popHeader{
  padding: 0 10px;
  box-sizing: border-box;
}
.popHeader,
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  //border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.selectImg{
  width: 16px;
  height: 16px;
}
/deep/ .van-collapse-item__content{
  padding: 0 16px;
}

.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.all .box:last-of-type{
  margin-bottom: 60px;
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.dict_name{
  font-size: 11px;
  border: 1px solid #1DA4F2;
  border-radius: 2px;
  background: rgba(16, 184, 246, 0.1);
  color: #1da4f2;
  padding: 1px 3px;
  box-sizing: border-box;
  white-space: nowrap;
  /*margin-top: 10px;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: PingFang SC;
  min-height: 25px;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px!important;
  font-weight: bold;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
.btnXiangQing{
  color: white;
  background: #1DA4F2;
  border: none;
  padding: 3px 8px;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 11px;
}
.btnXiangQing img{
  width: 5px;
  height: 9px;
  margin-left: 5px;
}

.btnXiangQing,
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.box_rigth_bottom{
  margin-top: 5px;
}
.box_rigth_bottom p{
  margin-bottom: 5px;
}
.box_rigth_bottom p:nth-child(1),
.box_rigth_bottom p:nth-child(3){
  font-size: 13px;
}
.box_rigth_bottom p a{
}
.box_rigth_bottom p span{
  color: #E3170D;
  margin: 0 8px 0 3px;
}
.goodAt{
  font-size: 13px;
  display: flex;
}
.goodAt a{
  display: block;
  white-space: nowrap;
}
.goodAt span{
  /*width: 80%;*/
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333 !important;
}
.selectDoctor{
  background: rgba(29, 164, 242, 0.1) !important;
}
.keepBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  button{
    width: 95%;
    height: 44px;
    border: 1px solid #1DA4F2;
    background: #FFFFFF;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    color: #1da4f2;
    margin: 0 10px;
  }
}
.disable{
  color: #fff!important;
  background: #E5E5E5!important;
  border: none!important;
}

/deep/ .inpTime{
  .el-input__inner{
    padding: 0 10px;
  }
  .el-input-group__append{
    padding: 0 5px!important;
  }
}

/deep/ .el-table .disabledCheck .cell::before{
  content: '选择';
  text-align: center;
  line-height: 37px;
}
/deep/ .el-checkbox__inner{
  border-radius: 50%;
}
/deep/ thead {
   .el-table-column--selection {
     .cell {
       .el-checkbox{
        display: none;
      }
    }
  }
}
/deep/ .el-table .warning-row {
  color: red;
}
/deep/ .el-table .success-row {
  color: #333;
}
/deep/ .van-collapse-item__content{
  padding: 0 0 0 16px;
}
/deep/ .van-cell{
  padding: 10px 16px 10px 16px;
}
</style>
<style >
/deep/ .el-table__empty-text{
  left: auto;
}

</style>
